<!--
<template>
  <div class="ten_box">
    <m-header modile-title="练习14" go-back="true"></m-header>
    <div class="ten-main">
      <button v-rightMenu="menudata">点击按钮</button>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    .ten-main {
      width: 100%;
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'

  var mixin = {
    data: function () {
      return {
        message: 'hello',
        foo: 'abc'
      }
    },
    created() {
      console.log('混入对象的钩子被调用')
    }
  };
  export default {
    name: 'lianxi14',
    data() {
      return {
        message: 'goodbye',
        bar: 'def',
        menudata: {
          // 菜单box的样式   Menu box style
          boxStyle: "width:150px;background:#f55;",
          // 菜单选项的样式 Style of menu options
          optionStyle: "color:#fff;line-height:30px;font-size:15px;",
          menus: [
            {
              content:"右键菜单标题",
              callback:"callbackMethods",
              style:"border-bottom:1px solid #fff;background:#333;line-height:30px;",
              icon:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2310514390,3580363630&fm=27&gp=0.jpg",
              iconStyle:"width:20px;height:20px;",
              iconPosition:"left",
            },
            {
              content:"右键菜单二",
              callback:"otherMethods"
            }
          ]
        }
      }
    },
    mixins: [mixin],
    created() {
      // 与组件数据发送冲突时以组件数据优先
      // console.log(this.$data) // 打印出来是bar: 'def',foo: 'foo',message: 'goodbye'
      console.log('组件钩子被调用') // 混入对象的钩子将在组件自身钩子之前调用
    },
    methods: {
      callbackMethods(){
        console.log('callback')
      },
      otherMethods(){
        console.log('other')
      }
    },
    components: {
      mHeader,
    }
  }
</script>
-->
<template>
  <div class="ten_box">
    <m-header modile-title="练习14" go-back="true"></m-header>
    <cascad-mune :menus="menus"></cascad-mune>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import Scroll from '../../../../components/scroll'
  // 子组件（本页的）
  import CascadMune from '../../../../components/cascad-menu'
  import menu from './json/menu'

  export default {
    name: 'lianxi14',
    data() {
      return {
         menus: [
           {
             name: '菜单1',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单8',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单2',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单3',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单4',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单5',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单6',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单7',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单8',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           },
           {
             name: '菜单9',
             data: [
               {
                 name: '1.1'
               },
               {
                 name: '1.2'
               },
               {
                 name: '1.3'
               },
               {
                 name: '1.4'
               },
               {
                 name: '1.5'
               },
               {
                 name: '1.6'
               }
             ]
           }
         ]
        // menus: []
      }
    },
    created() {
      // this.menus = menu
      console.log(this.menus)
    },
    components: {
      mHeader,
      Scroll,
      CascadMune
    }
  }
</script>
